<template>
  <header class="app-top-nav flex flex-col">
    <div class="app-header-info">
      <div class="app-header-bar container flex justify-between items-center">
        <div class="logo-wrap">
          <a class="title" href="/" :title="ProjectSubName">
            <img class="logo mr-4" src="/logo.svg" alt="" />
            <span class="sub-name">{{ ProjectName }}</span>
          </a>
        </div>
        <div class="content">
          <el-menu :default-active="active" theme="dark" class="app-el-menu" mode="horizontal" background-color="transparent" :ellipsis="false" text-color="#fff" router>
            <el-menu-item v-for="link in ROUTES_LINKS" :key="link.path" :index="link.path">{{ link.title }}</el-menu-item>
          </el-menu>
        </div>
        <div class="text-right app-header-search flex items-center">
          <AppSearch @handleSearch="onSearch" />
          <div class="app-header-user">
            <ClientOnly>
              <UserInfo v-if="isLogined" />
              <NotLogin v-else />
            </ClientOnly>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>
<script setup lang="ts">
import { ProjectName, ProjectSubName, ROUTES_LINKS } from '@/config'
import AppSearch from '@/components/AppSearch/index.vue'

const route = useRoute()
const router = useRouter()
const appStore = useAppStore()
const isLogined = appStore.isLogined || isLogin()
const active = ref(route.path)

// 搜索
const onSearch = ({ title, navId }: any) => {
  router.push({ path: `/search/${title}`, query: { navId } })
}
</script>
